<template>
  <div>
    御剑乘风来,除魔天地间!===app
    <hr />
    <SlotTable :list="list">
      <template #look="{ row }">
        <!-- ==={{row}} -->
        <button @click="lookHandel(row)">编辑</button>
        <button @click="del(row.id)">删除</button>
      </template>
    </SlotTable>
    <!-- <SlotTable :list="list1">
    <template #look="{row}">
      <button>查看</button>
      <button @click="del1(row.id)">删除</button>
    </template>
  </SlotTable> -->

    <!-- 对话框组件 -->
    <Dialog :flag.sync="flag" width="70%" height="70%" title="查看编辑">
      <form action="">
        书名: <input v-model="fromDate.bookname" type="text" />
        <br />
        作者: <input v-model="fromDate.author" type="text" />
        <br />
        出版社: <input v-model="fromDate.publisher" type="text" />
      </form>
      <footer>
        <button @click="cancel">取消对话框</button>
        <button @click="submit">编辑</button>
        <button @click="add">添加</button>
        <span v-show="flag1">名字和年龄都不能为空</span>
      </footer>
    </Dialog>
  </div>
</template>
<script>
import Dialog from './slot-table/Dialog.vue'
import SlotTable from './slot-table/SlotTable.vue'
export default {
  components: { SlotTable, Dialog },
  name: '',

  data () {
    return {
      list: [],
      // list1: [
      //   { id: 1, name: '赵小云', age: 19 },
      //   { id: 2, name: '张小花', age: 19 },
      //   { id: 3, name: '孙大明', age: 19 }
      // ],
      flag: false,
      fromDate: { bookname: '', author: '' },
      flag1: false,

    }
  },
  // beforeCreate () {
  //   console.log('beforeCreate===父亲')

  // },
  created () {
    this.getList()
  },
  // beforeMount () {
  //   console.log('beforeMount===父亲')

  // },
  // mounted () {
  //   console.log('mounted===父亲')

  // },
  computed: {
  },
  methods: {
    async getList () {
      const res = await this.axios.get('http://ajax-api.itheima.net/api/books')
      console.log(res.data.data, 9999999999999);
      this.list = res.data.data
    },
    del (id) {
      this.list = this.list.filter(item => {
        return item.id != id
      })
    },
    del1 (id) {
      this.list1 = this.list1.filter(item => {
        return item.id != id
      })
    },
    cancel () {
      this.flag = false
    },
    lookHandel (row) {
      this.flag = true
      // this.fromDate = row
      // 表单值改变row会边源头数据列表数据会变,为了避免,可以采取深拷贝
      this.fromDate = JSON.parse(JSON.stringify(row))//实现深拷贝
    },
    submit () {
      const obj = this.list.find(item => { return item.id == this.fromDate.id })
      obj.bookname = this.fromDate.bookname
      obj.author = this.fromDate.author
      obj.publisher= this.fromDate.publisher
      // this.fromDate={
      //   name:'',
      //   age:''
      // }//可有可无，不写也没影响
      this.flag = false
    },
    async add () {
      if (this.fromDate.bookname.length != 0 & this.fromDate.author.length != 0) {
        this.list.push({
          id: this.list.length + 1,
          bookname: this.fromDate.bookname,
          author: this.fromDate.author,
          publisher: this.fromDate.publisher
        })
        //   this.fromDate.name=''
        //   this.fromDate.age=''
        //   this.flag=false
        this.fromDate.bookname = ''
        this.fromDate.author = ''
        this.flag = false
      } else {
        this.flag1 = !this.flag1
      }
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
